import Base from "../base.js";
import ordersApi from "../../api/order.js";
import userslistApi from "../../api/userList.js";
export default class extends Base {
    data = {
        // 当前页
        curPage: 1,
        //每页显示条数
        eachPage: 10,
        // 总条数
        total: 0,
        // 总页数
        maxPage: 0,
        rows: [],
        cinemas: []
    };
    render() {
        this.$el.html(`
        <h1 style="text-align:center">订单列表</h1>
   <div class="row" style="display:flex;">
     <div id="theater_info" class="col-sm-9 panel panel-default theater-table">
        <div class="form-inline" style="display:flex; margin-left: -36px; ">
          <div class="layui-form-item" >
            <label class="layui-form-label" style="width:120px" >查询订单</label>
            <div class="layui-input-inline">
               <input type="text" name="moveName" required lay-verify="required" placeholder="请输入电影" autocomplete="off" class="layui-input" style="width:200px">
            </div>
          </div>
          <button type="button" class="layui-btn layui-btn "  style="margin-left:20px;"  id="search">查询</button>
        </div>
         <!--放映厅表格-->
         <table id="demo" lay-filter="test"></table>  
         <!--分页工具栏-->
         <div id="test1"></div>
     </div>
   </div>
     `);
        this.tableEle = layui.table;
        this.laypage = layui.laypage;
        this.formele = layui.form;
        this.searchBtn = $("#search");
        this.moveName=$("input[name=moveName]");
        // 表格渲染
        this.tableEle.render({
            elem: '#demo',
            // 配置分页栏
            cols: [[ //表头
                { field: '_id', title: 'ID', fixed: 'left', width: 200, align: 'center' }
                , { field: 'movieImg', title: '电影图片', width: 100, align: 'center' ,
                templet: res => {
                    const movieImg= res.movieImg
                    return `<img src=http://localhost:3002${movieImg} alt="">`
                }}
                , { field: 'moveName', title: '电影', width: 150, align: 'center' }
                , { field: 'cinemaName', title: '影院', width: 170, align: 'center' }
                , {
                    field: 'theater', title: '放映厅', width: 80, align: 'center'
                },
                , {
                    field: 'displayName', title: '座位', width: 80, align: 'center'
                },
                , {
                    field: 'showDate', title: '放映日期', width: 100, align: 'center'
                },
                , {
                    field: 'showTime', title: '放映时间', width: 100, align: 'center'
                },
                , {
                    field: 'price', title: '票价', width: 80, align: 'center'
                },
                , {
                    field: 'nowdateTime', title: '下单时间', width: 200, align: 'center'
                },
            ]]
        });
    }
    // 获取订单列表
    async getorders() {
        const { curPage, eachPage } = this.data;
        const data = await ordersApi.orderList({ curPage, eachPage });
        // const abv = await userslistApi.get({ curPage, eachPage });
        // console.log(abv);
        // console.log(data);
        Object.assign(this.data,data)
        this.rerender();
    }
    rerender() {
        this.tableEle.reload('demo', {
            data: this.data.rows
        });

        this.laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: this.data.total
            , limit: this.data.eachPage
            , limits: [10, 15, 20]
            , curr: this.data.curPage
            , layout: ['prev', 'page', 'next', 'count', 'limit']
            , jump: async (obj, first) => {
                if (!first) {
                    this.data.curPage = obj.curr;
                    this.data.eachPage = obj.limit;
                    const { curPage, eachPage } = this.data;
                    const data = await ordersApi.orderList({ curPage, eachPage });
                    Object.assign(this.data,data)
                    this.tableEle.reload('demo', {
                        data: this.data.rows,
                        limit: this.data.eachPage
                    });
                }
            }
        });
    }
    // 查询订单
    async searchorder (moveName){
      const data=  await ordersApi.searchMove(moveName);
      this.data.rows= data;
      this.data.total=data.length;
      this.rerender();
    }
    handle(){
        // 查询
        this.searchBtn.on("click",()=>{
           const moveName=this.moveName.val();
            this.searchorder(moveName);
        })
    }
    mounted() {
        this.getorders();
    }
}